<template>
	<el-card>
		<el-row slot="header" type="flex" class="row-bg" justify="space-between">
			<span>路由管理</span>
		</el-row>
		<el-table :data="tree_data" default-expand-all row-key="route_id" style="width: 100%">
			<el-table-column fixed label="路由名称" prop="route_name" width="180">
			</el-table-column>
			<el-table-column label="#" prop="route_id" type="index">
			</el-table-column>
			<el-table-column prop="route_title" label="显示标题">
			</el-table-column>
			<el-table-column prop="route_path" label="路由地址" width="120">
			</el-table-column>
			<el-table-column prop="route_full_path" label="完整路由地址" width="160">
			</el-table-column>
			<el-table-column prop="component_name" label="组件名称">
			</el-table-column>
			<el-table-column prop="component_path" label="组件路径" width="240">
			</el-table-column>
			<el-table-column prop="route_alias" label="路由别名">
			</el-table-column>
			<el-table-column prop="permission_remark" label="备注">
			</el-table-column>
			<el-table-column prop="require_auth" label="登录状态">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="260">
				<template slot-scope="scope">
					<el-button v-permission="'system:route:edit'" @click="openEditDialog(scope.row)" icon="el-icon-edit">编辑</el-button>
					<el-button v-permission="'system:route:create'" @click="openInsertDialog(scope.row)" icon="el-icon-switch-button">添加</el-button>
					<el-button v-permission="'system:route:remove'" @click="handleRemove(scope.row, scope.$index)" type="danger"
						icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="添加路由" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
				<el-form-item label="路由标题" prop="route_title">
					<el-input type="text" v-model="insert_form.route_title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由名称" prop="route_name">
					<el-input type="text" v-model="insert_form.route_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由地址" prop="route_path">
					<el-input type="text" v-model="insert_form.route_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="父级路有权限ID" prop="parent_id">
					<el-input type="text" v-model="insert_form.parent_id" readonly autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="完整路由地址" prop="route_full_path">
					<el-input type="text" v-model="insert_form.route_full_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop="component_name">
					<el-input type="text" v-model="insert_form.component_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件路径" prop="component_path">
					<el-input type="text" v-model="insert_form.component_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由别名" prop="route_alias">
					<el-input type="text" v-model="insert_form.route_alias" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录状态" prop="require_auth">
					<el-radio-group v-model="insert_form.require_auth">
						<el-radio label="1">需要认证</el-radio>
						<el-radio label="2">对外公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="permission_remark">
					<el-input type="text" v-model="insert_form.permission_remark" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑路由" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
				<el-form-item label="路由标题" prop="route_title">
					<el-input type="text" v-model="edit_form.route_title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由名称" prop="route_name">
					<el-input type="text" v-model="edit_form.route_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由地址" prop="route_path">
					<el-input type="text" v-model="edit_form.route_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="父级路有权限ID" prop="parent_id">
					<el-input type="text" v-model="edit_form.parent_id" readonly autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="完整路由地址" prop="route_full_path">
					<el-input type="text" v-model="edit_form.route_full_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop="component_name">
					<el-input type="text" v-model="edit_form.component_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件路径" prop="component_path">
					<el-input type="text" v-model="edit_form.component_path" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由别名" prop="route_alias">
					<el-input type="text" v-model="edit_form.route_alias" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录状态" prop="require_auth">
					<el-radio-group v-model="edit_form.require_auth">
						<el-radio :label="1">需要认证</el-radio>
						<el-radio :label="2">对外公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="permission_remark">
					<el-input type="text" v-model="edit_form.permission_remark" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保 存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Route } from '@/api';
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			edit_dialog_visible: false,
			insert_dialog_visible: false,
			insert_form: {
				route_title: '',
				route_name: '',
				route_path: '',
				parent_id: '',
				route_full_path: '',
				component_name: '',
				component_path: '',
				route_alias: '',
				require_auth: '1',
				permission_remark: '',
			},
			edit_form: {
				route_title: '',
				route_name: '',
				route_path: '',
				parent_id: '',
				route_full_path: '',
				component_name: '',
				component_path: '',
				route_alias: '',
				require_auth: '',
				permission_remark: '',
			},
			current_route: '',
			rules: {
				route_title: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				route_name: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				route_path: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				parent_id: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				route_full_path: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				component_name: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				component_path: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				route_alias: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				require_auth: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
				permission_remark: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
			}
		}
	},
	computed: {
		...mapState('route', ['flat_route']),
		...mapGetters('route', ['tree_data']),
	},
	watch: {
		"insert_form.route_path": function (newValue, oldValue) {
			let parent = this.flat_route.filter((item) => item.route_id === this.insert_form.parent_id);
			let son = this.insert_form;
			if (parent.route_id === 0) {
				this.insert_form.route_full_path = this.insert_form.route_path;
			} else {
				this.insert_form.route_full_path = `${parent[0].route_path}/${son.route_path}`;
			}
		},
		"edit_form.route_path": function (newValue, oldValue) {
			let parent = this.flat_route.filter((item) => item.route_id === this.edit_form.parent_id);
			let son = this.edit_form;
			if (parent.route_id === 0) {
				this.edit_form.route_full_path = this.edit_form.route_path;
			} else {
				this.edit_form.route_full_path = `${parent[0].route_path}/${son.route_path}`;
			}
		}
	},
	methods: {
		...mapActions('route', ['load_list', 'insert_route', 'edit_route', 'remove_route']),
		//打开编辑弹窗
		openEditDialog(route) {
			//缓存当前操作route
			this.current_route = route;
			//还原表单
			this.edit_form = { ...route };
			//打开弹窗
			this.edit_dialog_visible = true;
		},
		openInsertDialog(route) {
			this.insert_dialog_visible = true;
			this.insert_form.parent_id = route.route_id;
		},
		handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg, data } = await this.insert_route({ ...this.insert_form });
					if (status) {
						this.insert_dialog_visible = false;
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}
			});
		},
		async handleEdit() {
			this.$refs.edit_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.edit_route({ ...this.edit_form })
					if (status) {
						Object.assign(this.current_route, this.edit_form);
						this.$message.success(msg);
						this.edit_dialog_visible = false;
					}
				}
			});
		},
		// 清除表单验证
		handleCloseDialog(formName) {
			this.$refs[formName].resetFields();
		},
		//删除标签
		handleRemove(route, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await this.remove_route({ route, index });
					if (status) {
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},
	created() {
		this.load_list();
	}
}
</script>

<style></style>